<template>
	<view>
		<view>
			<image v-if="headerType == 1" class="more" src="@/package_goods/static/more/ic_nav_more@2x.png"
				@click="showBar"></image>
			<image v-if="headerType == 0" class="more" src="@/package_goods/static/more/ic_nav_share_transparent@2x.png"
				@click="showBar"></image>
		</view>
		<view class="more-box" :class="[barShow ? 'modalTrue' : 'modalFalse']">
			<view class="more-bg" @click="barShow = !barShow" @touchmove.stop.prevent="moveHandle"></view>
			<view class="more-content fun" @touchmove.stop.prevent="moveHandle">
				<view class="row">
					<view class="item" v-if="showShare">
						<image v-if="isMiguvideo" src="@/package_goods/static/more/ic_pop_share@2x.png"
							@click.prevent="shareWindow"></image>
						<image v-if="!isMiguvideo" src="@/package_goods/static/more/ic_pop_share@2x.png" mode=""
							v-clipboard:copy="locationUrl" v-clipboard:error="setboardError"
							v-clipboard:success="setboard"></image>
						<view class="text">分享</view>
					</view>
					<view class="item">
						<image src="@/package_goods/static/more/ic_pop_home@2x.png" mode="" @click="goMainPage"></image>
						<view class="text">回到首页</view>
					</view>
					<view class="item">
						<image src="@/package_goods/static/more/ic_pop_my@2x.png" mode="" @click="goUser"></image>
						<view class="text">个人中心</view>
					</view>
					<view class="item">
						<image src="@/package_goods/static/more/ic_pop_order@2x.png" mode="" @click="goOder"></image>
						<view class="text">订单中心</view>
					</view>
				</view>
				<view>
					<button class="cancel" @click="barShow = !barShow">取消</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			shareData: {
				//分享信息
				type: Object,
				default: () => {
					return {};
				}
			},
			currentUrl: String
		},
		data() {
			return {
				barShow: false,
				locationUrl: window.location.href, //当前地址
			}
		},
		computed: {
			headerType() { //判断渠道是否需要标题 headerType 1 展示 0 不展示
				return this.$globalData.state.scene.headerType
			},
			homePageUrl() {
				return this.$globalData.state.scene.homePageUrl;
			},
			showShare() {
				//是否展示 外部分享按钮
				// #ifdef MP-WEIXIN
				return false;
				// #endif
				// #ifdef H5
				let noShowSharePages = [
					'package_order/order/list',
					'pages/cart/goodsCart',
					'package_user/viewHistory/viewHistory',
					'package_user/address/usableList',
					'package_user/address/addAndEdit',
					'package_order/order/create'
				];
				if (noShowSharePages.includes(this.currentUrl)) return false
				return this.$globalData.state.scene.showShare == 1;
				// #endif
			},
			isMiguvideo() { //是否 咪咕视频端内或八闽 非sdk
				// #ifdef H5
				return [3, 4].includes(this.$globalData.state.flag.entranceApp)
				// #endif
				return false
			}
		},
		methods: {
			moveHandle() {},
			showBar() {
				this.barShow = true;
			},
			goUser() {
				this.$routeUtils.navigateTo({
					url: '/pages/user/index'
				});
			},
			goMainPage() {
				if (this.$globalData.state.mgdbId) {
					let params = {
						pendantId: this.$globalData.state.mgdbId
					};
					this.$request('operation/queryPageByPendantId', params, 'api', false, null, false).then(res => {
						if (res.url) {
							this.$utils.handleLink('105', res.url)
						} else {
							this.errRoute();
						}
					}, error => {
						this.errRoute();
					})
				} else {
					this.errRoute();
				}
			},
			errRoute() { //错误跳转处理
				if (this.homePageUrl) { // 有渠道页面跳转渠道页面 ,没有直接跳首页
					this.$routeUtils.navigateTo({
					 url: this.homePageUrl
					});
				} else {
					this.$routeUtils.reLaunch({
						url: "/pages/index/index"
					})
				}
			},
			goOder() {
				this.$routeUtils.navigateTo({
					url: '/package_order/order/list'
				});
			},
			setboard() {
				let self = this;
				// #ifdef  H5
				self.$utils.toast('复制链接成功！');
				// #endif
			},
			setboardError(e) {
				this.$utils.toast('浏览器暂不支持快捷复制！');
			},
			shareWindow() {
				// #ifdef H5
				if ([3, 4].includes(this.$globalData.state.flag.entranceApp)) {
					if (this.$globalData.state.flag.entranceApp == 4) {
						this.$share.baMinShare(this.shareData)
					} else {
						this.$share.sxShare(this.shareData);
					}
				}
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.more {
		width: 60rpx;
		height: 60rpx;
		margin-right: 16rpx;
	}

	.more-box {
		.more-bg {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 997;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.6);
		}

		.more-content {
			position: fixed;
			bottom: 0;
			margin-bottom: 0;
			left: 0;
			z-index: 998;
			width: 100%;
			transition: 0.5s;
			background: #F5F5F5;
			border-radius: 20rpx 20rpx 0px 0px;
			padding-bottom: env(safe-area-inset-bottom);

			.detail-title {
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				text-align: center;
				margin-top: 40rpx;
				margin-bottom: 40rpx;
				font-family: PingFangSC-Regular, PingFang SC;
			}

		}
	}

	.modalTrue {
		.more-content {
			bottom: 0;
		}

		.more-bg {
			display: block;
		}
	}

	.modalFalse {
		.more-content {
			bottom: -960rpx;
		}

		.more-bg {
			display: none;
		}
	}

	.fun {
		background: #F5F5F5;

		.row {
			display: block;
			overflow: hidden;
			padding: 40rpx 0;

			.item {
				text-align: center;
				margin-bottom: 0;
				min-width: 25%;
				float: left;

				image {
					width: 96rpx;
					height: 96rpx;
				}

				.text {
					font-size: 24rpx;
					color: #999999;
					font-weight: 400;
					line-height: 34rpx;
				}
			}
		}

		.cancel {
			text-align: center;
			margin: 14rpx auto;
			width: 710rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: #FFFFFF;
			font-size: 80rpx;
			color: #333333;
			line-height: 80rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
		}
	}
</style>
